<template>
  <div class="app-container">
    <my-header :title="title"></my-header>
    <my-goods v-for="item in list" :key="item.id" :goods="item"></my-goods>
    <my-footer :list="list"></my-footer>
  </div>
</template>

<script>
// 目标1：自定义头部
// 1.1在MyHeader 中定义props
// 1.2在props中加一些限制条件(类型/默认值/必选项)
// 1.3子组件使用这些数据
// 1.4父组件传入这些数据，根据需求传递(标题内容/文字颜色/背景色)

// 目标2：获取数据
// 2.1下包，在main.js中引入
// 2.2设置baseURL
// 2.3将axios 挂载到Vue的原型上
// 2.4在App.vue中created时调用全局属性this.$http ,请求/api/cart

// 目标3：渲染数据
// 3.1App.vue 中将获取的数据保存到data中
// 3.2使用 v-for 循环渲染MyGoods组件
// 3.3循环时将循环的数据传递给MyGoods(父传子)
// 3.4 子组件接收到的数据后，使用即可

// 目标4：勾选状态处理
// 4.1 在MyGoods.vue 中双向绑定 good_state给复选框
// 4.2动态绑定id给复选框
// 4.3动态绑定相同的id给label的for属性

// 目标5：商品数量
// 5.1将goods从MyGoods.vue传给MyCount.vue(建议直接传对象，否则数据同步很麻烦)
// 5.2在MyCount.vue 中使用v-model进行双向绑定
// 5.3给按钮实现自增或自减(做边界处理)
// 5.4使用watch强行修改超出边界的数据

// 目标6：全选功能
// 6.1 在 MyFooter.vue中使用 v-model 双向绑定一个计算属性isAll
// 6.2 在App.vue 中将list 传递给MyFooter.vue
// 6.3 在set 方法中修改所有小选框状态
// 6.4 在get 方法中使用every统计所有小选框状态并返回

// 目标7：数量属性
// 7.1在 MyFooter.vue定义计算属性allCount
// 7.2遍历数组中所有的数据，判断勾选状态
// 7.3如果勾选了就累加商品数量并求和
// 7.4使用插值表达式渲染在指定区域

// 目标8：
// 8.1 在MyFooter.vue 定义计算属性 allPrice
// 8.2 遍历数组勾选中所有的数据，判断勾选状态
// 8.3如果勾选了就累加商品数量和单价的乘积
// 8.4使用插值表达式渲染在指定区域
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  components: { MyHeader, MyGoods, MyFooter },
  name: "ShopcarApp",

  data() {
    return {
      title: "购物车",
      list: [],
    };
  },

  mounted() {},

  methods: {},
  async created() {
    let res = await this.$http({ url: "/api/cart" });
    this.list = res.data.list;
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 45px 0 50px 0;
}
</style>